<template>
  <div class="login_content">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="img">
        <img src="../assets/image/logo.png" alt="" />
      </div>
      <!-- 表单区域 -->
      <el-form
        label-width="0px"
        class="form"
        :model="LoginForm"
        :rules="Loginrule"
        ref="loginFormRef"
      >
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-s-custom"
            v-model="LoginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="LoginForm.password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login" class="login"
            >登录</el-button
          >
          <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      LoginForm: {
        username: "coderqian",
        password: "123456",
      },
      Loginrule: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "用户名长度应为2-10个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 15,
            message: "密码长度应为6-15个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    reset() {
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      const md5 = this.$crypto.createHash("md5");
      md5.update(this.LoginForm.password);
      let md5pass = md5.digest("hex");
      console.log(md5pass);
      let data = {
        name: this.LoginForm.username,
        password: md5pass
      };
      this.$refs.loginFormRef.validate(async (vaild) => {
        if (vaild) {
          const { data: res } = await this.$http({
            url: "login",
            data: qs.stringify(data),
            method: "post",
          });
          if (res.code == 0) {
            console.log(res);
            window.sessionStorage.setItem("tokenid", res.tokenid);
            window.sessionStorage.setItem("tokenimg", res.img);
            // window.sessionStorage.setItem("tokenname", res.tokenname);

            this.$message({
              message: res.tokenid + " 欢迎回来！",
              type: "success",
            }),
              //储存token口令 保证页面权限

              this.$router.push("/home");
          } else if (res.code == 1) {
            this.$message.error("登录失败");
          } else {
            this.$message.error("该用户已被设为禁用状态！");
          }
        }
      });
    },
  },
};
</script>
<style scoped>
.login_content {
  /* height: .0625rem; */
  height: 100%;
  background: url("../assets/image/bg.png") no-repeat;
  width: 100%;
  background-size: 100%;
  position: absolute;
}
.login_box {
  width: 500px;
  height: 350px;
  background-color: #a7a7a8;
  /* opacity: 0.5; */
  margin: 150px auto;
  position: relative;
  border-radius: 10px;
}
.login {
  background-color: gray !important;
  border-color: gray;
}
.img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -50px;
  background-color: #fff;
  border: 1px solid rgb(158, 157, 157);
}
.img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin-top: 5px;
}
.form {
  width: 70%;
  text-align: right;
  position: absolute;
  left: 15%;
  /* margin-left: 50%; */
  bottom: 0px;
}
.btns {
  text-align: right;
}
</style>
